<template>
    <div>
        <!-- 页头，放logo和搜索 -->
        <mynav bColor="#F5F5F5">
            <template>
                <div><img src="../assets/logo.png" alt="" style="margin-right:10px;height:1.2rem"> xx小说网</div>
                <div>
                    <router-link to="/search">
                        <i class="fa fa-search" 
                            :style="{color:'#ccc','font-size':'26px'}">
                        </i>
                    </router-link>
                </div>
            </template>
        </mynav>
        <!-- 主页的导航，有首页、分类、排行、书架 -->
        <div class="home-nav">
            <div @click='changeIndex(0,"myIndex")' :class="['item',index==0?'active':'']">首页</div>
            <div @click='changeIndex(1,"myClass")' :class="['item',index==1?'active':'']">分类</div>
            <div @click='changeIndex(2,"myRank")' :class="['item',index==2?'active':'']">排行</div>
            <div @click='changeIndex(3,"myBooks")' :class="['item',index==3?'active':'']">书架</div>
        </div>
        <!-- 切换显示的分页组件 -->
        <div class="main-content">
            <component 
                :is='compName' 
                :land="land" 
                :userName="userName" 
                @zi-signOut='signOut'
                @zi-signIn='userLoad'>
            </component>
        </div>
        <!-- 页脚 -->
        <footer>
            <mynav :fSize="16">
                <div v-if="!land"><span @click='userLoad'>登录</span></div>
                <div v-if="land">{{userName}}</div>
                <div v-if="land"><span @click='signOut'>退出登陆</span></div>
            </mynav>
            <!-- 页脚的搜索可以带参数 -->
            <div class="search">
                <input v-model="searchText" type="text" placeholder="请输入关键字">
                <div @click="gotoSearch" class="btn">
                    <i class="fa fa-search" 
                        :style="{color:'#999','font-size':'14px'}">
                    </i>
                </div>
            </div>
        </footer>
    </div>
</template>

<script>
import mynav from '../components/mynav.vue'
// 导入4个分页组件
import myIndex from '@/pages/myIndex.vue'
import myClass from '@/pages/myClass.vue'
import myRank from '@/pages/myRank.vue'
import myBooks from '@/pages/myBooks.vue'
export default {
    name: 'Home',
    data() {
        return {
            index: 0, // 显示的分页下标
            compName: 'myIndex', // 显示的分页名字
            searchText: '', // 接收输入要查询的文字
            land: false, //登陆状态
            userName: '', //用户名
        }
    },
    components: {
        mynav,
        myIndex,
        myClass,
        myRank,
        myBooks,
    },
    methods: {
        // 更改显示的组件名，和高亮的下标
        changeIndex(i,cname) {
            this.index = i;
            this.compName = cname;
        },
        userLoad() {
            // console.log('登陆');
            this.$router.push('/sign_in');
        },
        // 去搜索
        gotoSearch() {
            this.$router.push({name:'Search',query:{'inputTxt':this.searchText}})
        },
        signOut() {
            this.userName = "";
            this.land = false;
            this.$mycookie.delCookie('un');
        }
    },
    mounted() {
        let user = this.$mycookie.getCookie('un');
        // console.log("user",'"'+user+'"');
        if(user!=undefined && user.length > 0) {
            // console.log(user);
            this.userName = user;
            this.land = true;
        }
    },
    beforeRouteEnter(to, from, next) {
        next((_this) => {
            let user = _this.$mycookie.getCookie('un');
            // console.log("user",'"'+user+'"');
            if(user!=undefined && user.length > 0) {
                // console.log(user);
                _this.userName = user;
                _this.land = true;
            }
        });
    },
    // beforeRouteUpdate(to, from, next) {
    //     console.log(to,from,next);
    //     if(to.name == "Home"){
    //         console.log("come Home");
    //     }
    //     next();
    // }
}
</script>

<style lang="scss" scoped>
.home-nav {
    display: flex;
    height: 40px;
    position: sticky;
    top: 0px;
    z-index: 999;
    .item {
        flex-grow: 1;
        font-size: 17px;
        line-height: 40px;
        height: 40px;
        text-align: center;
        background-color: #333333;
        color: #ccc;
        &.active {
            background-color: #454545;
            color: #f2f2f2;
        }
    }
}
footer {
    .search {
        display: flex;
        padding: 20px 10px;
        padding-top: 0;
        height: 30px;
        input {
            height: 30px;
            box-sizing: border-box;
            width: 90%;
            padding-left: 15px;
        }
        .btn {
            font-size: 16px;
            text-align: center;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background-color: #ccc;
        }
    }
}
</style>
